<template>
  <div class="aside-container">
    <header class="header">
      <slot name="header"></slot>
    </header>
    <main class="main">
      <slot name="main"></slot>
    </main>
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Aside',
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped>
.aside-container {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
  // flex-direction: column;
  // align-content: flex-start;
  // align-items: center;
  // height: 100%;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  // padding: 1rem 1.2rem;
  overflow: hidden;
}
// .header {
//   display: block;
// }
// .main {
//   display: table;
//   margin: 0.7rem 0 0.2rem;
//   width: 100%;
//   table-layout: fixed;
//   text-align: center;
// }
// .footer {
//   display: block;
//   margin-top: 0.7rem;
//   background-color: rgb(72, 72, 255);
//   color: #fff;
//   text-align: center;
//   line-height: 2.4;
// }
</style>
